import React, { Component } from 'react'
import { StyleSheet, View, Text, TouchableOpacity, Image } from 'react-native'
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import HTMLView from 'react-native-htmlview'
import BaseItem from './BaseItem'

export default class TrendingItem extends BaseItem {
	render() {
		const { projectModel } = this.props
		const { item } = projectModel

		if (!item) {
			return null
		}
		// let favoriteButton = (
		// 	<TouchableOpacity style={{ padding: 6 }}>
		// 		<FontAwesome name={'star-o'} size={26} style={{ color: 'red' }} />
		// 	</TouchableOpacity>
		// )
		let description = '<p>' + item.description + '</p>'
		return (
			<TouchableOpacity onPress={() => this.onItemClick()}>
				<View style={styles.cell_container}>
					<Text style={styles.title}>{item.fullName}</Text>
					<HTMLView
						value={description}
						stylesheet={{
							p: styles.description,
							a: styles.description
						}}
					/>
					<Text style={styles.description}>{item.meta}</Text>
					<View style={styles.row}>
						<View style={{ flexDirection: 'row', alignItems: 'center' }}>
							<Text>Built by:</Text>
							{item.contributors.map((result, i, arr) => {
								return (
									<Image
										style={{ height: 22, width: 22, margin: 2 }}
										source={{ uri: arr[i] }}
										key={i}
									/>
								)
							})}
						</View>
						{this._favoriteIcon()}
					</View>
				</View>
			</TouchableOpacity>
		)
	}
}

const styles = StyleSheet.create({
	cell_container: {
		backgroundColor: '#ffffff',
		padding: 10,
		marginRight: 5,
		marginLeft: 5,
		marginVertical: 3,
		borderColor: '#dddddd',
		borderWidth: 0.5,
		borderRadius: 2,
		shadowColor: '#cccccc',
		shadowOffset: { width: 0.5, height: 0.5 },
		shadowOpacity: 0.4,
		shadowRadius: 1,
		elevation: 2 //这是android中设置阴影的
	},
	title: {
		fontSize: 16,
		marginBottom: 2,
		color: '#212121'
	},
	description: {
		fontSize: 14,
		marginBottom: 2,
		color: '#757575'
	},
	row: {
		justifyContent: 'space-between',
		flexDirection: 'row',
		alignItems: 'center'
	}
})
